<template>
  <view class="my-container">
    <!-- 用户信息区 -->
    <view class="user-card">
      <!-- 头像区域 -->
      <view class="avatar-box">
        <image 
          :src="userInfo.avatar" 
          class="avatar"
          mode="aspectFill"
        />
        <uni-icons 
          type="camera-filled" 
          size="24" 
          class="camera-icon"
          @click="changeAvatar"
        />
      </view>
      
      <!-- 用户详情 -->
      <view class="user-info">
        <text class="nickname">{{ userInfo.nickname }}</text>
        <text class="account">账号：{{ userInfo.account }}</text>
      </view>
    </view>

    <!-- 设备状态 -->
    <view class="status-card">
      <view class="status-item">
        <uni-icons type="scan" size="24" color="#007AFF" />
        <text class="label">当前设备</text>
        <text class="value">{{ deviceInfo.model }}</text>
      </view>
      <view class="status-item">
        <uni-icons type="wifi" size="24" color="#4CD964" />
        <text class="label">连接状态</text>
        <text class="value">{{ deviceInfo.status }}</text>
      </view>
    </view>

    <!-- 功能入口（替换uni-list） -->
    <view class="menu-list">
      <!-- 设备管理 -->
      <view 
        class="menu-item" 
        @click="navTo('/pages/device/device')"
      >
        <view class="menu-header">
          <uni-icons type="settings" size="20" color="#666" />
        </view>
        <text class="menu-title">设备管理</text>
        <view class="menu-arrow">
          <uni-icons type="arrowright" size="20" color="#999" />
        </view>
      </view>

      <!-- 通知设置 -->
      <view 
        class="menu-item" 
        @click="navTo('/pages/settings/notify')"
      >
        <view class="menu-header">
          <uni-icons type="notification" size="20" color="#666" />
        </view>
        <text class="menu-title">通知设置</text>
        <view class="menu-footer">
          <switch 
            :checked="notifyEnabled" 
            @change="toggleNotify"
            color="#4CD964"
          />
        </view>
        <view class="menu-arrow">
          <uni-icons type="arrowright" size="20" color="#999" />
        </view>
      </view>

      <!-- 帮助中心 -->
      <view 
        class="menu-item" 
        @click="navTo('/pages/help/index')"
      >
        <view class="menu-header">
          <uni-icons type="help" size="20" color="#666" />
        </view>
        <text class="menu-title">帮助中心</text>
        <view class="menu-arrow">
          <uni-icons type="arrowright" size="20" color="#999" />
        </view>
      </view>

      <!-- 版本信息 -->
      <view 
        class="menu-item" 
        @click="navTo('/pages/help/version')"
      >
        <view class="menu-header">
          <uni-icons type="info" size="20" color="#666" />
        </view>
        <text class="menu-title">版本信息</text>
        <text class="menu-right-text">{{ appVersion }}</text>
        <view class="menu-arrow">
          <uni-icons type="arrowright" size="20" color="#999" />
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <button 
      class="logout-btn" 
      @click="handleLogout"
    >
      退出登录
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 用户信息
const userInfo = ref({
  avatar: '/static/avatar/default.png',
  nickname: '智能家居管家',
  account: 'user@example.com'
})

// 设备信息
const deviceInfo = ref({
  model: 'UONI V2 Pro',
  status: '已连接',
  sn: 'SN-20240417001'
})

// 应用设置
const notifyEnabled = ref(true)
const appVersion = ref('2.3.1')

// 更换头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0]
    }
  })
}

// 通知开关
const toggleNotify = (e) => {
  notifyEnabled.value = e.detail.value
}

// 导航跳转
const navTo = (url) => {
  uni.navigateTo({ url })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出当前账号吗？',
    success: (res) => {
      if (res.confirm) {
        uni.reLaunch({ url: '/pages/login/login' })
		
      }
    }
  })
}
</script>

<style lang="scss">
.my-container {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 40rpx;

  .user-card {
    background: #fff;
    padding: 40rpx;
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .avatar-box {
      position: relative;
      margin-right: 32rpx;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .camera-icon {
        position: absolute;
        right: -8rpx;
        bottom: -8rpx;
        background: #fff;
        border-radius: 50%;
        padding: 8rpx;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
      }
    }

    .user-info {
      flex: 1;
      
      .nickname {
        display: block;
        font-size: 36rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .account {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .status-card {
    background: #fff;
    border-radius: 16rpx;
    margin: 0 24rpx 24rpx;
    padding: 24rpx;

    .status-item {
      display: flex;
      align-items: center;
      padding: 16rpx 0;

      .label {
        flex: 1;
        margin: 0 24rpx;
        color: #666;
      }

      .value {
        color: #333;
        font-weight: 500;
      }
    }
  }

  .menu-list {
    margin: 0 24rpx;
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border-bottom: 1rpx solid #f5f6fa;

    .menu-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }

    .menu-title {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      margin-left: 16rpx;
    }

    .menu-footer {
      display: flex;
      align-items: center;
      gap: 12rpx;
    }

    .menu-right-text {
      color: #999;
      font-size: 28rpx;
      margin-right: 24rpx;
    }

    .menu-arrow {
      color: #999;
    }
  }

  .logout-btn {
    margin: 48rpx 24rpx 0;
    background: #fff;
    color: #ff3b30;
    border: 1rpx solid #ff3b30;
    border-radius: 99rpx;
    padding: 24rpx;
  }
}
</style>